<template>
	<div class="detail-header">
		<router-link 
		to="/" 
		tag="div" 
		class="header-abs"
		v-show="showAbs"
		>
			<div class="iconfont header-abs-back">
				&#xe624;
			</div>
		</router-link>
		<div 
		class="header-fixed"
		v-show="!showAbs"
		:style="opacityStyle"
		>
			<router-link to="/">
			  <div class="iconfont header-fixed-back">&#xe624;</div>
			</router-link>
			景点详情
		</div>
	</div>
	
</template>

<script>
   
	export default{
		name:'DetailHeader',
		data(){
			return {
				showAbs:true,
				opacityStyle:0
			}
		},
		methods:{
			handleScroll(){
				const top=document.documentElement.scrollTop
				console.log("scroll")
				if(top>60){
					let opacity=top/140
					opacity=opacity > 1 ? 1 :opacity
					this.opacityStyle={opacity}
                    this.showAbs=false
				}else{
                    this.showAbs=true
				}
                
			}
		},
		// 去掉keep-alive缓存后下面这两个方法会失效,可以用mounted代替activated,用beforeDestroy代替
		// activated(){
		//     //当进入页面时执行
		//     window.addEventListener('scroll',this.handleScroll)
		// },
		// deactivated(){
		// 	//当离开页面时执行
		// 	//对全局函数进行解绑
		//     window.removeEventListener('scroll',this.handleScroll)

		// }

        mounted(){
             window.addEventListener('scroll',this.handleScroll)
        },
        beforeDestroy(){
        	 window.removeEventListener('scroll',this.handleScroll)
        }


	}
		
</script>

<style lang="stylus" scoped>
     @import '~styles/varibles.styl'
	.header-abs
	   position:absolute
	   left:.2rem
	   top:.2rem
	   width:.8rem
	   height:.8rem
	   text-align:center
	   line-height:.8rem
	   border-radius:.4rem
	   background:rgba(0,0,0,0.8)
	   .header-abs-back
	       color:#fff
	       font-size:.4rem

	.header-fixed
	  z-index:2
	  position: fixed
	  top:0
	  left:0
	  right: 0
	  height:$headerHeight
	  line-height:$headerHeight
	  text-align:center
	  color:#fff
	  background:$bgColor
	  font-size:.32rem
	  .header-fixed-back 
	     position: absolute
	     top:0
	     left:0
	     width:.64rem
	     text-align:center
	     font-size:.4rem
	     color: #fff

</style>